import React, { useState } from 'react';
import { Card, Space, Typography, Image } from '@arco-design/web-react';

import cs from 'classnames';
import { useHistory } from 'react-router-dom';
import styles from './index.module.less';

import IconClub from './assets/club.svg';

import IconRaceClick from './assets/race-click.svg';
import IconRacePay from './assets/race-pay.svg';
import IconRaceNum from './assets/race-num.svg';
import IconRaceMoney from './assets/race-money.svg';

import IconStatusApply from './assets/status-apply.svg';
import IconStatusPrepare from './assets/status-prepare.svg';
import IconStatusReview from './assets/status-review.svg';
import IconStatusSuccess from './assets/status-success.svg';
import IconStatusFail from './assets/status-fail.svg';

import IconService from './assets/service.svg';

const StatusData = {
  1: { action: '申请入驻', icon: <IconStatusApply />, text: '待入驻' },
  2: { action: '申请入驻', icon: <IconStatusPrepare />, text: '入驻准备中' },
  3: {
    action: '查看详情',
    icon: <IconStatusReview />,
    text: '审核中',
    desc: '审核时效1-7个工作日',
  },
  4: { action: '查看详情', icon: <IconStatusSuccess />, text: '审核通过' },
  5: { action: '申请入驻', icon: <IconStatusFail />, text: '审核失败' },
};

const AnalysisData = [
  { icon: <IconRaceClick />, name: '赛事点击次数', value: 23434 },
  { icon: <IconRacePay />, name: '赛事支付次数', value: 23434 },
  { icon: <IconRaceNum />, name: '赛事报名人数', value: 23434 },
  { icon: <IconRaceMoney />, name: '赛事总收入', value: 23434 },
];

const RaceData = [
  { name: '待发布', value: 23434 },
  { name: '待报名', value: 23434 },
  { name: '报名中', value: 23434 },
  { name: '待开赛', value: 23434 },
  { name: '比赛中', value: 23434 },
  { name: '赛事结束', value: 23434 },
];

export default function Page() {
  const history = useHistory();
  const [status] = useState(3);
  const statusData = StatusData[status];
  return (
    <div className={styles.page}>
      <div className={styles.content}>
        <div className={styles.status}>
          <div className={styles.sponsor}>
            <Typography.Text
              bold
              style={{ color: 'var(--color-white)', fontSize: '32px' }}
            >
              北京星期四俱乐部
            </Typography.Text>
            <div className={styles.middle}>
              <div className={styles.time}>
                <Typography.Text className={styles.desc}>
                  申请时间：2024-10-10
                </Typography.Text>
                <Typography.Text className={styles.desc}>
                  入驻时间：2024-10-10
                </Typography.Text>
              </div>
              <div
                className={styles.apply}
                onClick={() => {
                  history.push('/sponsor/settlement');
                }}
              >
                {statusData.action}
              </div>
            </div>
            <div className={styles.status}>
              {statusData.icon}
              <Typography.Text className={styles.text}>
                {statusData.text}
              </Typography.Text>
              <Typography.Text className={styles.desc}>
                {statusData.desc}
              </Typography.Text>
            </div>
          </div>

          <div className={styles.info}>
            {/* <>
              <div className={stlyes.left}>
                <Image
                  width={104}
                  height={104}
                  style={{ borderRadius: '16px', marginBottom: '12px' }}
                  src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
                />
                <Typography.Text>北京星京速体育文化有限公司</Typography.Text>
              </div>
              <Image
                width={285}
                height={160}
                style={{ borderRadius: '16px' }}
                src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
              />
            </> */}
            <>
              <div className={styles['left-empty']}>
                <Typography.Text bold style={{ fontSize: '20px' }}>
                  俱乐部信息会在赛事详情展示
                </Typography.Text>
                <div className={styles.fill}>
                  <Typography.Text bold>立即完善</Typography.Text>
                </div>
              </div>
              <IconClub />
            </>
          </div>
        </div>
        <Space size={24} />
        <Card className={cs(styles.card, styles.analysis)}>
          <div className={styles.title}>
            <div className={styles.line}></div>
            <Typography.Title heading={5}>数据看板</Typography.Title>
          </div>
          <div className={styles.detail}>
            {AnalysisData.map((item, index) => {
              return (
                <div key={index} className={styles.item}>
                  <div style={{ display: 'flex' }}>
                    {item.icon}
                    <div>
                      <Typography.Text type={'secondary'}>
                        {item.name}
                      </Typography.Text>
                      <Typography.Title heading={3}>
                        {item.value}
                      </Typography.Title>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
        <Space size={24} />
        <Card className={cs(styles.card, styles.racing)}>
          <div className={styles.title}>
            <div className={styles.line}></div>
            <Typography.Title heading={5}>赛事管理</Typography.Title>
          </div>
          <div className={styles.detail}>
            {RaceData.map((item, index) => {
              return (
                <div key={index} className={styles.item}>
                  <Typography.Text type={'secondary'}>
                    {item.name}
                  </Typography.Text>
                  <Typography.Title heading={3}>{item.value}</Typography.Title>
                </div>
              );
            })}
          </div>
        </Card>
      </div>
      <div className={styles.service}>
        <IconService />
        <div className={styles.code}>
          <Image
            width={70}
            height={70}
            src={require('./assets/service-code.png')}
          />
          <Typography.Text bold>平台客服</Typography.Text>
        </div>
      </div>
    </div>
  );
}
